<template>
  <div class="bot">
      <p :style="img" class="p1" @click="talk()">
          <span>3</span>
      </p>
      <p :style="aishu?img1:imga" @click="ai()">
          <span>{{aishu?"96":"97"}}</span>
      </p>
      <p :style="shoushu?img2:imgb" @click="shou()" :id="shoushu?'':'p3'">
          <span>{{shoushu?"254":"255"}}</span>
      </p>
  </div>
</template>

<script>
export default {
    data(){
        return{
            aishu:true,
            shoushu:true,
             img:{backgroundImage: "url(" + require("sta/load.png") + ")"},
             img1:{backgroundImage: "url(" + require("sta/load1.1.png") + ")"},
             imga:{backgroundImage: "url(" + require("sta/load1.png") + ")"},
             imgb:{backgroundImage: "url(" + require("sta/load2.2.png") + ")"},
             img2:{backgroundImage: "url(" + require("sta/load2.png") + ")"},
        }
    },
    methods:{
        talk(){
            this.$router.push("/talk");
        },
        ai(){
            this.aishu = !this.aishu;
        },
        shou(){
            this.shoushu = !this.shoushu;
        }
    },
}
</script>

<style scoped>
    .bot{
        position: fixed;
        bottom: 0;
        width: 100%;
        height: 1.2rem;
        display: flex;
        justify-content: space-around;
        margin-top: 1.2rem;
        background-color: #fff;
    }
    .bot p{
        display: inline-block;
        width: .64rem;
        height: .64rem;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        align-self: center;
        position: relative;
    }
    .bot p span{
        position: absolute;
        top: -0.1rem;
        right: -0.3rem;
    }
    .bot .p1{
        background-image: url(/newList/load.png);
    }
    
    .bot p:nth-child(2){
        background-image: url(/newList/load1.1.png);
    }
    .bot #p2{
        background-image: url(/newList/load1.png);
    }
    .bot p:last-child{
        background-image: url(/newList/load2.png);
    }.bot #p3{
        background-image: url(/newList/load2.2.png);
    }
</style>